<template>
  <div class="container-pt">
    <van-nav-bar fixed title="详情" @click-left="$router.back()" left-arrow />
    <div class="content-box">
      <div class="art-tit">{{ data.title }}</div>
      <div class="art-desc">
        <span>时间:{{ new Date(data.create_date).toLocaleString() }}</span>
        <span>分类：{{ data.catename }}</span>
        <span>阅读({{ data.click }})</span>
      </div>
      <van-divider />
      <div class="art-content" v-html="data.content"></div>
    </div>
    <van-cell>
      <h3 slot="title" class="group-title">相关推荐</h3>
    </van-cell>
    <articleList v-for="item in list" :key="item.id" :item="item" />
    <recommend-list />
    <van-grid clickable class="bot" :column-num="2">
      <van-grid-item
        icon="like-o"
        text="收藏"
        :class="{ active: data.isCollect }"
        @click="finger(1, data.isCollect)"
      />
      <van-grid-item
        icon="thumb-circle-o"
        text="点赞"
        :class="{ active: data.isLike }"
        @click="finger(2, data.isLike)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getContentApi } from "../api";
import { getFingerApi } from "../api/user";
import RecommendList from "../components/recommend-list.vue";
export default {
  name: "Show",
  data() {
    return {
      data: {},
      list: [],
    };
  },
  components: { RecommendList },
  // created() {
  //   this.getContent();
  // },
  watch: {
    $route: {
      deep: true,
      handler() {
        this.getContent();
        window.scrollTo(0, 0);
      },
      immediate: true,
    },
  },
  methods: {
    async getContent() {
      // console.log(this.$route);
      const {
        data: { info, recommend },
      } = await getContentApi(this.$route.query.id);
      // console.log(info, recommend);
      this.data = info;
      this.list = recommend;
    },
    async finger(type, flag) {
      let action = flag ? "del" : "add";
      await getFingerApi({
        type,
        article_id: this.data.id,
        action,
      });
      // console.log(res);
      if (type === 1 && action === "add") {
        this.$toast("收藏成功");
        this.data.isCollect = true;
      } else if (type === 1 && action === "del") {
        this.$toast("取消收藏成功");
        this.data.isCollect = false;
      } else if (type === 2 && action === "add") {
        this.$toast("点赞成功");
        this.data.isLike = true;
      } else if (type === 2 && action === "del") {
        this.$toast("取消点赞成功");
        this.data.isLike = false;
      }
    },
  },
};
</script>00
<style scoped lang="less">
/deep/ .art-content img {
  max-width: 88%;
  max-height: 100%;
}
.active {
  color: #f2f209;
}
.content-box {
  padding: 20px 20px;
}
.art-tit {
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc {
  font-size: 28px;
  color: #aaa;
  span {
    margin-right: 20px;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 20px 0;
}
/deep/ .van-grid-item__text {
  margin-top: 0 !important;
}
.group-title {
  color: #1989fa;
}
</style>